<template>
	<view class="container">
		<view class="wechatapp">
			<view class="header">
				<image class="image" :src="Logo"></image>
			</view>
		</view>
		<view class="auth-title">申请获取以下权限</view>
		<view class="auth-subtitle">获得你的公开信息（昵称、头像等）</view>
		<view class="login-btn">
			<!-- 获取微信用户信息  @click.stop="getUserProfile()"-->
			<button class="button btn-normal" open-type="chooseAvatar" @chooseavatar="onChooseavatar">授权登录</button>
		</view>
		<view class="no-login-btn">
			<button class="button btn-normal" @click="handleCancel">暂不登录</button>
		</view>
	</view>
</template>

<script>
	import store from '@/store'
	import Config from '@/core/config'
	const Logo=Config.get('logo')
	export default {
		data(){
			return{
				Logo
			}
		},
		methods: {
			// 获取code
			getCode() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: res => {
							resolve(res.code)
						},
						fail: reject
					})
				})
			},
			// 获取微信用户信息(新版)
			onChooseavatar(e) {
				const app = this;
				const userInfo={
					avatarUrl:e.detail.avatarUrl
				};
				app.onAuthSuccess(userInfo)
			},
			// 授权成功事件
			// 这里分为两个逻辑:
			// 1.将code和userInfo提交到后端，如果存在该用户 则实现自动登录，无需再填写手机号
			// 2.如果不存在该用户, 则显示注册页面, 需填写手机号
			// 3.如果后端报错了, 则显示错误信息
			async onAuthSuccess(userInfo) {
				const app = this
				// 提交到后端
				store.dispatch('LoginMpWx', {
						code: await app.getCode(),
						oauth: 'MP-WEIXIN',
						// userInfo
					})
					.then(result => {
						console.log("登录成功！")
						// 一键登录成功
						app.$unts.toast(result.message);
						app.onNavigateBack();
					})
					.catch(err => {
						// 显示错误信息
						if (uni.$unt.isEmptyLer(err)) {
							app.$unts.toast(err.message)
						}
						app.onEmitSuccess(userInfo)
					})
			},

			// 将oauth提交给父级
			// 这里要重新获取code, 因为上一次获取的code不能复用(会报错)
			async onEmitSuccess(userInfo) {
				const app = this
				app.$emit('success', {
					oauth: 'MP-WEIXIN', // 第三方登录类型: MP-WEIXIN
					code: await app.getCode(), // 微信登录的code, 用于换取openid
					userInfo // 微信用户信息
				})
			},

			/**
			 * 暂不登录
			 */
			handleCancel() {
				// 跳转回原页面
				this.onNavigateBack()
			},

			/**
			 * 登录成功-跳转回原页面
			 */
			onNavigateBack(delta = 1) {
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack({
						delta: Number(delta || 1)
					})
				} else {
					this.$unts.navTo('pages/index/index')
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		font-size: 32rpx;
		background: #fff;
		min-height: 100vh;
		 padding: 0 60rpx;
	}

	.wechatapp {
		padding: 80rpx 0 48rpx;
		border-bottom: 1rpx solid #f0f0f4;
		margin-bottom: 72rpx;
		text-align: center;

		.header {
			width: 190rpx;
			height: 190rpx;
			border: 4rpx solid #fff;
			margin: 0 auto 0;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 2rpx 0 10rpx rgba(50, 50, 50, 0.3);

			.image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}

	.auth-title {
		color: #585858;
		font-size: 34rpx;
		margin-bottom: 40rpx;
	}

	.auth-subtitle {
		color: #888;
		margin-bottom: 88rpx;
		font-size: 28rpx;
	}

	.login-btn {
		padding: 0 20rpx;

		.button {
			height: 88rpx;
			background: #04be01;
			color: #fff;
			font-size: 30rpx;
			border-radius: 999rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}


	.no-login-btn {
		margin-top: 40rpx;
		padding: 0 20rpx;

		.button {
			height: 88rpx;
			background: #dfdfdf;
			color: #fff;
			font-size: 30rpx;
			border-radius: 999rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>